{extend name="common/base" /}
{block name="style"}
<link href="__STATIC__/vendors/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="__STATIC__/vendors/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/vendors/umeditor/umeditor.min.js"></script>
{/block}
{block name="body"}
<style>
    .wrapper-border {
        vertical-align: top;
        letter-spacing: normal;
        word-spacing: normal;
        padding: 14px;
        position: relative;
        z-index: 1;
        list-style: none;
        float: left;
    }
    .text{
        background-color: #FFF;
        text-align: center;
        border: solid 1px #F5F5F5;
    }
    .text:hover{
        border-color: #27A9E3;
    }
    .text i{
        padding: 20px;
        line-height: 40px;
        font-size: 14px;
    }

    .text a.del {
        font-family: Tahoma;
        font-size: 10px;
        line-height: 14px;
        color: #CCC;
        background-color: #FFF;
        vertical-align: middle;
        text-align: center;
        display: none;
        width: 14px;
        height: 14px;
        border: solid 1px;
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 8px;
        text-decoration: none;
    }

    .text:hover a.del {
        color: #27A9E3;
        border-color: #27A9E3;
        display: block;
    }
    .text:hover a.del:hover {
        text-decoration: none;
    }
</style>
<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">



            <div class="col-md-12 col-xs-12">
                <div class="x_panel">
                 <form action="{:url('')}" class="form1 form-horizontal row-border" >
<div class="x_content">


                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">基础资料</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">选择类型</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">上传图片</a>
                        </li>
                      </ul>
                      <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
                          
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                          <!-- 类型开始 -->
                          
                          
                          
                          <div id="spec">
                                                                <div class="form-group spec_li">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">颜色</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <div class="">
                                            <input type="hidden" name="sp_name[1]" value="颜色">
                                            <ul>
                                              
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="黄色" nc_type="429" class="sp_color" name="sp_val[1][429]" event-node="checked_box">
              </span><span class="pv_name">黄色</span></li>
                       
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="桔色" nc_type="430" class="sp_color"  name="sp_val[1][430]" event-node="checked_box">
              </span><span class="pv_name">桔色</span></li>
                       
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="蓝色" nc_type="431" class="sp_color"  name="sp_val[1][431]" event-node="checked_box">
              </span><span class="pv_name">蓝色</span></li>
                       
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="银色" nc_type="432" class="sp_color"  name="sp_val[1][432]" event-node="checked_box">
              </span><span class="pv_name">银色</span></li>
                        
            
                                    </ul>
                                        </div>
                                    </div>
                                </div>
                                                                <div class="form-group spec_li">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">尺码</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <div class="">
                                            <input type="hidden" name="sp_name[15]" value="尺码">
                                            <ul>
                                              
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="16g" nc_type="435" name="sp_val[15][435]" event-node="checked_box">
              </span><span class="pv_name">16g</span></li>
                       
            <li class="span2" style="margin-left: 0px;"><span nctype="input_checkbox">
              <input type="checkbox" value="32g" nc_type="436" name="sp_val[15][436]" event-node="checked_box">
              </span><span class="pv_name">32g</span></li>
                        
            
                                    </ul>
                                        </div>
                                    </div>
                                </div>
                                                                </div>
                            <!-- 产品组合 -->                                    
                            <div id="spec_table"></div>
                            
                          
                          <!-- 类型结束 -->
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
                              <!-- 图片上传数量 -->
                            <div id="upload_img_li">
                        
                                <div class="col-md-55">
                        <div class="thumbnail">
                          <div class="image view view-first">
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">
                            <div class="mask">
                              <p>Your Text</p>
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a href="#"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p><button class="btn btn-space btn-info " type="submit">上 传 图 片</button></p>
                          </div>
                        </div>
                      </div>
                      
                               <div class="col-md-55">
                        <div class="thumbnail">
                          <div class="image view view-first">
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">
                            <div class="mask">
                              <p>Your Text</p>
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a href="#"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p><button class="btn btn-space btn-info upload_img" type="button">上 传 图 片</button></p>
                          </div>
                        </div>
                      </div>
                      
                               <div class="col-md-55">
                        <div class="thumbnail">
                          <div class="image view view-first">
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">
                            <div class="mask">
                              <p>Your Text</p>
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a href="#"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p><button class="btn btn-space btn-info upload_img" type="button">上 传 图 片</button></p>
                          </div>
                        </div>
                      </div>
                      
                               <div class="col-md-55">
                        <div class="thumbnail">
                          <div class="image view view-first">
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">
                            <div class="mask">
                              <p>Your Text</p>
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a href="#"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p><button class="btn btn-space btn-info upload_img" type="button">上 传 图 片</button></p>
                          </div>
                        </div>
                      </div>
                      
                       <div class="col-md-55">
                        <div class="thumbnail">
                          <div class="image view view-first">
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">
                            <div class="mask">
                              <p>Your Text</p>
                              <div class="tools tools-bottom">
                                <a href="#"><i class="fa fa-link"></i></a>
                                <a href="#"><i class="fa fa-pencil"></i></a>
                                <a href="#"><i class="fa fa-times"></i></a>
                              </div>
                            </div>
                          </div>
                          <div class="caption">
                            <p><button class="btn btn-space btn-info upload_img" type="button">上 传 图 片</button></p>
                          </div>
                        </div>
                      </div>
                      
                     
                      
                            </div>
                              <!--  结束图片上传数量 -->
                        </div>
                      </div>
                    </div>

                  </div>
               

                       
                  



                            <div class="clearfix"> </div>
                            <footer class="twt-footer clearfix">
                                <button class="btn btn-space btn-info pull-right" type="submit">确 定 添 加</button>
                                <a href="{:url('index')}" class="btn btn-space btn-default pull-right">返回列表</a>

                            </footer>
                        </form>
                    </div>
                </div>
            </div>






        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">

    var array = [];
    var results = new Array();  //存放结果集
    //创建一个数组
    var len = array.length;  //长度为3
    var indexs = {};
    var myspec_value=[];   //存放属性值
    
   

//网上拷贝意思不明
    function GetResults(start) {
     
        start++;
        if (start > len - 1) {  //说明array数组里有值
            return;
        }
         
        if (!indexs[start]) { 
            //alert("----==->"+indexs[start]);
            indexs[start] = 0;
        }
        if (!(array[start] instanceof Array)) {  //判断类型－用途将不是数组变为数组
            array[start] = [array[start]];  
        }
        for (indexs[start] = 0; indexs[start] < array[start].length; indexs[start]++) {
            GetResults(start);
            if (start == len - 1) {   //这个意思最后一次循环相等
                var temp = [];
                var mytemp=[];
                for (var i = len - 1; i >= 0; i--) {
                    if (!(array[start - i] instanceof Array)) {
                        array[start - i] = [array[start - i]];
                    }
                    temp.push(array[start - i][indexs[start - i]]);
                    mytemp.push(myspec_value[start - i][indexs[start - i]]);
                }
                var mytempstring=mytemp.join("");
               temp.push(mytempstring);
                results.push(temp);
            }
        }

    }
    
    
    
   function spec_li_list() {
        var arr = new Array();
        var arr_val = new Array();
        var is = 0;
        $(".spec_li", "#spec").each(function () {
            var arr_li = new Array();   //子列名称
             var arr_li_val = new Array();  //子列值
            $("li", $(this)).each(function () {
                if ($(this).find("input").is(":checked")) {
                    arr_li.push($(this).find(".pv_name").text());
                    arr_li_val.push($(this).find("input").attr("nc_type"));
                }
            });
            arr[is] = new Array();
            arr[is] = arr_li;
            arr_val[is]=new Array();
            arr_val[is]=arr_li_val;
            is++;
        });
         myspec_value=arr_val;
         
        return arr;
    }
    $("li", "#spec").bind("click", function () {
        $("#cou").html("");
        $("#list").html("");
        $("#spec_table").html("");
        array = spec_li_list();
        
        results = new Array();
        //创建一个数组
        len = array.length;
      
        indexs = {};
        GetResults(-1);
        $("#cou").html("共有" + results.length + "种组合；<br/>");
        if(results.length>0){    //创建表格
            var vhtml='<div class="form-group">\
                                 <label class="control-label col-md-3 col-sm-3 col-xs-12">库存配置</label>\
                                    <div class="col-md-9 col-sm-9 col-xs-12">\
                                    <table class="table table-bordered">\
                                <thead>\
                                <tr>';
                                  $(".spec_li", "#spec").each(function () {
                                   vhtml=vhtml+'<th>'+$(this).find("label").text()+'</th>';
                      });
             var vhtml= vhtml+'<th>市场价</th>\
                                  <th>价格</th>\
                                  <th>库存</th>\
                                  <th>预警值</th>\
                                  <th>商家货号</th>\
                                </tr>\
                              </thead>\
                              <tbody>\
                              </tbody>\
                            </table></div></div>';
            $("#spec_table").html(vhtml);
            
        }
        
        //用于判断是否上传图片－－颜色选几个就可以上传几大块颜色
        
        if(results.length>0){
        	 var color_num = new Array();  //选中颜色个数--新定义
        	$(".sp_color", "#spec").each(function () {
        		//把颜色和值放到一个数组中->在放到数组中变为二维数组
        		 var color_arr = new Array(); 
        		if ($(this).is(":checked")) {
        			color_arr["kk"]=$(this).val();
        			color_arr["vv"]=$(this).attr("nc_type");
        			
        		color_num.push(color_arr);
        		}
        	});
        	var simgput='';
        	
        	//选择了颜色
        	for(var co=0;co<color_num.length;co++){
        		
        		var simgput=simgput+'<div class="col-md-12">\
                <div class="x_panel">\
                <div class="x_title">\
                  <h3>'+color_num[co]['kk']+'</h3></div><div class="clearfix"></div>\
                 <div class="x_content">\
                  <div class="upload_file-button" ></div></div></div>';
        	}
        	
        	$("#upload_img_li").html(simgput);
        	
        	
        }else{
        	//只有一条上传默认图片
        	$("#upload_img_li").html('<li><div class="col-md-55">\
                        <div class="thumbnail">\
                          <div class="image view view-first">\
                            <img style="width: 100%; display: block;" src="images/media.jpg" alt="image">\
                            <div class="mask">\
                              <p>Your Text</p>\
                              <div class="tools tools-bottom">\
                                <a href="#"><i class="fa fa-link"></i></a>\
                                <a href="#"><i class="fa fa-pencil"></i></a>\
                                <a href="#"><i class="fa fa-times"></i></a>\
                              </div>\
                            </div>\
                          </div>\
                          <div class="caption">\
                            <p><button class="btn btn-space btn-info " type="submit">上 传 图 片</button></p>\
                          </div>\
                        </div>\
                      </div></li>');
        }
        
        
        
        
        
        
        for (var a = 0; a < results.length; a++)
        {
         var table_td="<tr>";
         var t_spec="i_";
         
         for(var mm=0;mm<len;mm++){
             table_td=table_td+"<td>"+results[a][mm]+"</td>";
         }
         //var table_td=table_td+'<input type="hidden" name="spec['+t_spec+results[a][len]+']" value=""/>';
         table_td=table_td+'<td><div class="input-group">\
                            <input class="form-control" type="text" name="spec['+t_spec+results[a][len]+'][marketprice]">\
                            <span class="input-group-btn">\
                                               <i type="button" class="btn btn-primary">元</i>\
                                          </span>\
                          </div></td>\
                                  <td><div class="input-group">\
                            <input class="form-control" type="text"  name="spec['+t_spec+results[a][len]+'][price]">\
                            <span class="input-group-btn">\
                                              <i type="button" class="btn btn-primary">元</i>\
                                          </span>\
                          </div></td>\
                                  <td><div class="input-group">\
                            <input class="form-control" type="text" name="spec['+t_spec+results[a][len]+'][stock]">\
                          </div></td>\
                                  <td><div class="input-group">\
                            <input class="form-control" type="text" name="spec['+t_spec+results[a][len]+'][alarm]">\
                           </div></td>\
                                  <td><div class="input-group">\
                            <input class="form-control" type="text" name="spec['+t_spec+results[a][len]+'][sku]">\
                            </div></td>';
         table_td=table_td+"</tr>";
            $("#spec_table").find("tbody").append(table_td); 
        }


    });
    
    $(function(){
    	//做上传
    	$(document.body).on("click",".upload_img",function(){
    		alert("2222");
    	});
    	
    	
    	
    });

     
</script>
{/block}